import React, { useState, useEffect ,useContext} from 'react';
import { Button, Modal, message, Form, Input, Space } from 'antd';
import createContext from '../../../../utils/gyqContext'
import { getGoodsById, setUserInfoByOrder } from '../../../../api/OrderApi'
import OrderselectGoods from './OrderselectGoods'

// import SelectGoods from './SelectGoods'
interface DataType {
    key: React.Key;
    number: number;
    order_number: number;
    submit_time: string;
    user_account: string;
    pay_method: string;
    order_source: number;
    order_state: number;        //订单状态
    conName: string,        //收货人姓名
    conPhone: string,       //收货人手机号
    postcode: string,       //邮政编码
    conAddress: string,     //收货地址
    goods_name: string,     //商品名称
    goods_pic: string,      //商品图片
    goods_price: number,     //商品单价
    goods_attribute: string,    //商品属性
    goods_number: number,       //商品数量
    remark: string,     //买家备注
    freight: number,        //运费
    discount: number,       //优惠金额


    goodsId: number | undefined;    //商品id
    orderId: number | undefined;    //订单id
    conId: number | undefined;  //规格id
}
interface PropsType {
    isModalOpen: boolean;
    close(): void;
    params: DataType | null
}

function OrderdetailsDel(props: PropsType) {
    const [isSelectOpen, setIsSelectOpen] = useState(false);
    const [form] = Form.useForm();
    const context = useContext<any>(createContext)
    const [goodsInfo, setGoodsInfo] = useState([])
    console.log('props.params获取数据', props.params);

    useEffect(() => {
        form.setFieldsValue({
            name: props.params?.conName,
            phone: props.params?.conPhone,
            // code: props.params?.postcode,
            address: props.params?.conAddress,
        })
    })


    const cancleHandle = () => {
        // setIsModalOpen(false);
        props.close()
        message.info('取消修改订单')
    };

    //确认添加
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);

        // 发起修改请求
        setUserInfoByOrder({
            orderId: props.params?.orderId,
            conId: props.params?.conId,
            conAddress: values.address,
            conName: values.name,
            conPhone: values.phone
        }).then(res => {
            console.log('修改联系人信息成功res', res);
            context.getOrder()

        }).catch(err => {
            console.log('err报错啦，修改失败哟', err);
        })
        // 关闭添加弹框
        props.close()
        // 提示
        message.success('修改订单成功')
        // 关闭添加弹框
    };

    // 关闭选择商品的弹框
    const close = () => {
        setIsSelectOpen(false)
    }

    // 选择商品 弹出弹框选择商品
    const selectGoods = () => {
        setIsSelectOpen(true)
        getGoodsById({
            goodsId: props.params?.goodsId,
            orderId: props.params?.orderId
        }).then(res => {
            // console.log('商品res',res);
            setGoodsInfo(res.data)
        }).catch(err => {
            console.log('err000', err);

        })
        setIsSelectOpen(true)
    }

    return (
        <>
            <Modal title="修改订单信息" open={props.isModalOpen} footer={null} width={600} forceRender>
                <Form form={form}
                    name="normal_login"
                    className="update-form"
                    onFinish={onFinish}
                >
                    <Form.Item
                        label='姓名'
                        name="name"
                    >
                        <Input placeholder="姓名" />
                    </Form.Item>
                    <Form.Item
                        label='手机号'
                        name="phone"
                    >
                        <Input
                            placeholder="手机号"
                        />
                    </Form.Item>
                    <Form.Item
                        label='收货地址'
                        name="address"
                    >
                        <Input
                            placeholder="收货地址"
                        />
                    </Form.Item>
                    <Form.Item
                        label='选择商品'
                        name="goods"
                    >
                        <Button type='link' onClick={()=>selectGoods()}>选择商品</Button>
                    </Form.Item>

                    <Form.Item shouldUpdate>
                        {() => (
                            <Space wrap>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                >
                                    确定
                                </Button>
                                <Button htmlType="button" className='orderlist_reset' onClick={cancleHandle}>
                                    取消
                                </Button>
                            </Space>

                        )}
                    </Form.Item>
                </Form>
            </Modal>


            {/* 商品选择弹框 */}
            <OrderselectGoods isSelectOpen={isSelectOpen} close={close} goodsInfo={goodsInfo} goodsId={props.params?.goodsId} orderId={props.params?.orderId}></OrderselectGoods>
        </>
    );
};

export default OrderdetailsDel;